<template>
    <page-box>
        <template v-slot:header>
            <ask-breadcrumb>
                <template
                    v-for="(item, index) in $getBreadCrumbsName(
                        '/module-manage/town-task-handle'
                    )"
                >
                    <ask-breadcrumb-item
                        :key="index"
                        v-if="item.path"
                        :to="'/' + item.path"
                        >{{ item.meta.title }}</ask-breadcrumb-item
                    >
                    <ask-breadcrumb-item :key="index" v-else>{{
                        item.meta.title
                    }}</ask-breadcrumb-item>
                </template>
                <ask-breadcrumb-item
                    @click="toPage"
                    :name="
                        $route.query.taskId
                            ? '我审核的任务'
                            : $route.query.pageFrom === 'share'
                            ? 'TownShareData'
                            : 'TownCreatedList'
                    "
                >
                </ask-breadcrumb-item>
                <ask-breadcrumb-item
                    name="TownCreatedAndReceivedDetailList"
                ></ask-breadcrumb-item>
            </ask-breadcrumb>
        </template>
        <div class="task-detail-header">
            <div class="title">
                <p class="name">
                    {{ tableName }}
                    <span :class="{ finish: _isFinish }">{{
                        $route.query.taskId
                            ? _isFinish
                                ? "已审批"
                                : "待审批"
                            : _isFinish
                            ? "已完成"
                            : "进行中"
                    }}</span>
                </p>
                <el-tooltip
                    v-if="Number(descriptionType) === 1"
                    effect="dark"
                    :content="description"
                    :disabled="!description"
                    placement="top"
                >
                    <p class="description">{{ description || "暂无描述" }}</p>
                </el-tooltip>
                <p
                    class="btn"
                    v-if="Number(descriptionType) === 2 && description"
                    @click="showRichText"
                >
                    查看表单介绍
                </p>
            </div>
            <div v-if="$route.query.taskId && !_isFinish">
                <el-button
                    type="primary"
                    @click="toAcceptance(true)"
                    class="blue"
                    >通过</el-button
                >
                <el-button type="primary" @click="toAcceptance(false)"
                    >驳回</el-button
                >
            </div>
        </div>
        <div class="task-detail-container">
            <div class="left">
                <el-table
                    ref="multipleTable"
                    v-show="tableData.length"
                    :data="tableData"
                    class="pbb__table"
                    header-cell-class-name="pbb__table-thead"
                    cell-class-name="pbb__table-thead-cell"
                    row-class-name="pbb__table-thead-row"
                    row-key="dataFormId"
                    style="width: 100%;height: calc(100% - 70px);background: #fff;overflow-y: auto;"
                    @selection-change="handleSelectionChange"
                    :key="key"
                >
                    <el-table-column
                        v-if="
                            ($route.query.taskId ||
                                (!$route.query.taskId &&
                                    $route.query.status.toString() === '1')) &&
                                !isApproval
                        "
                        :label="
                            $route.query.status.toString() === '1'
                                ? '数据状态'
                                : '审核状态'
                        "
                        align="center"
                        type="index"
                        width="100"
                    >
                        <template slot-scope="scope">
                            <span
                                style="color: #00b160"
                                v-if="
                                    scope.row.verify === 3 &&
                                        $route.query.status.toString() === '1'
                                "
                                >已确认</span
                            >
                            <span
                                style="color: #067bff"
                                v-if="
                                    scope.row.verify === 1 &&
                                        $route.query.status.toString() === '1'
                                "
                                >待确认</span
                            >
                            <el-tooltip
                                class="item"
                                effect="dark"
                                :disabled="!scope.row.verifyCause"
                                :content="scope.row.verifyCause"
                                placement="top"
                            >
                                <span
                                    style="color:#de2728"
                                    v-if="scope.row.verify === 0"
                                    >有误<i class="el-icon-warning"></i
                                ></span>
                            </el-tooltip>
                            <span v-if="scope.row.verify === 2">草稿</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        align="center"
                        type="selection"
                        :reserve-selection="true"
                        width="60"
                    >
                    </el-table-column>
                    <el-table-column
                        label="序号"
                        align="center"
                        type="index"
                        :index="indexMethod"
                        width="60"
                    >
                    </el-table-column>
                    <el-table-column
                        v-for="(item, index) in tableColumn"
                        :key="index"
                        :prop="item.prop"
                        :label="item.name"
                        :show-overflow-tooltip="
                            [3, 4, 6, 7, 12].includes(item.valueKindId)
                        "
                        :min-width="
                            [3, 11].includes(item.valueKindId)
                                ? '200px'
                                : [5, 8].includes(item.valueKindId)
                                ? '140px'
                                : item.name.length * 16 + 20 > 140
                                ? item.name.length * 16 + 20 + 'px'
                                : '140px'
                        "
                    >
                        <template slot-scope="scope">
                            <div v-if="item.itemType === 1">
                                <el-link
                                    type="primary"
                                    @click="showChildTable(item, scope.$index)"
                                    >查看详细</el-link
                                >
                            </div>
                            <template
                                v-else-if="item.valueKindId === 4"
                                class="address-text"
                            >
                                {{
                                    scope.row[item.prop]
                                        ? scope.row[item.prop].cityName
                                        : ""
                                }}
                                {{
                                    scope.row[item.prop] &&
                                    scope.row[item.prop].cityAddress
                                        ? scope.row[item.prop].cityAddress
                                        : ""
                                }}
                            </template>
                            <div v-else-if="item.valueKindId === 5">
                                <div
                                    v-if="
                                        scope.row[item.prop] &&
                                            scope.row[item.prop].length
                                    "
                                >
                                    <img
                                        class="table-img"
                                        :src="
                                            $staticUrl +
                                                '/' +
                                                scope.row[item.prop][0]
                                        "
                                        alt=""
                                        @click="
                                            previewImg(scope.row[item.prop])
                                        "
                                    />
                                </div>
                            </div>
                            <div v-else-if="item.valueKindId === 8">
                                <div
                                    v-if="
                                        scope.row[item.prop] &&
                                            scope.row[item.prop].length
                                    "
                                >
<!--                                    <video-->
<!--                                        class="table-img"-->
<!--                                        :src="-->
<!--                                            $staticUrl +-->
<!--                                                '/' +-->
<!--                                                scope.row[item.prop][0]-->
<!--                                        "-->
<!--                                        alt=""-->
<!--                                        @click="-->
<!--                                            previewVideo(scope.row[item.prop])-->
<!--                                        "-->
<!--                                    ></video>-->
                                    <el-buttom @click="previewVideo(scope.row[item.prop])">点击播放</el-buttom>
                                </div>
                            </div>
                            <div v-else-if="item.valueKindId === 9">
                                <div
                                    v-if="
                                        scope.row[item.prop] &&
                                            scope.row[item.prop].length
                                    "
                                >
                                    <el-button
                                        type="text"
                                        @click="
                                            previewVideo(
                                                scope.row[item.prop],
                                                'record'
                                            )
                                        "
                                        >播放</el-button
                                    >
                                </div>
                            </div>
                            <div v-else-if="item.valueKindId === 10">
                                <div
                                    v-if="
                                        scope.row[item.prop] &&
                                            scope.row[item.prop].length
                                    "
                                >
                                    <el-link
                                        class="table-file"
                                        v-for="(it, idx) in scope.row[
                                            item.prop
                                        ]"
                                        :key="idx"
                                        type="primary"
                                        :href="$staticUrl + '/' + it"
                                        target="_blank"
                                    >
                                        文件{{ idx + 1 }}
                                    </el-link>
                                </div>
                            </div>
                            <span
                                v-else
                                class="other-span"
                                :title="scope.row[item.prop]"
                                >{{ scope.row[item.prop] }}</span
                            >
                        </template>
                    </el-table-column>
                </el-table>
                <ask-empty-text
                    style="min-height: 400px;height: calc(100% - 70px);"
                    v-if="tableData.length === 0"
                >
                </ask-empty-text>
                <div class="page-base-footer" v-if="total > 0">
                    <div class="page-base-footer__right">
                        <div class="num-box">
                            已选<span>{{ multipleSelection.length }}</span
                            >条
                        </div>
                        <el-divider direction="vertical"></el-divider>
                        <el-button
                            v-if="
                                !$route.query.taskId &&
                                    $route.query.status.toString() === '1' &&
                                    !isApproval
                            "
                            :disabled="
                                multipleSelection.length === 0 || canMark
                            "
                            type="primary"
                            @click="markData"
                        >
                            标记数据状态
                        </el-button>
                        <el-button type="primary" @click="showExportSelect"
                            >导出数据</el-button
                        >
                        <el-button
                            :disabled="multipleSelection.length === 0"
                            type="primary"
                            @click="handleExprotAnnex"
                            >导出附件</el-button
                        >
                    </div>
                    <pagination
                        :total="total"
                        :page.sync="pageIndex"
                        :limit.sync="pageSize"
                        @pagination="getTable"
                    />
                </div>
            </div>
            <div class="right">
                <p class="title">流程日志</p>
                <div class="content">
                    <el-timeline>
                        <template v-for="(item, index) in processNodeInfo">
                            <el-timeline-item :key="item.id">
                                <template slot="dot">
                                    <icon-svg
                                        v-if="!index && !item.approvalStatus"
                                        name="icon-time"
                                    ></icon-svg>
                                    <span
                                        v-else
                                        :class="
                                            item.approvalStatus === 2
                                                ? 'red'
                                                : 'green'
                                        "
                                    ></span>
                                </template>
                                <div class="card">
                                    <p class="card-title">{{ item.title }}</p>
                                    <div
                                        class="reason"
                                        v-if="item.approvalStatus"
                                    >
                                        <span
                                            >{{
                                                item.approvalStatus === 2
                                                    ? "驳回"
                                                    : "通过"
                                            }}：</span
                                        >
                                        <p :title="item.reason">
                                            {{ item.reason }}
                                        </p>
                                    </div>
                                    <div class="name-box">
                                        <div class="name">
                                            <div class="img">
                                                {{ item.assignee.substr(0, 1) }}
                                            </div>
                                            <icon-svg
                                                v-if="
                                                    !index &&
                                                        !item.approvalStatus
                                                "
                                                name="icon-time"
                                            ></icon-svg>
                                            <p>
                                                {{
                                                    (item.category === "handle"
                                                        ? item.governmentName
                                                        : item.departmentName) +
                                                        "/" +
                                                        item.assignee
                                                }}
                                            </p>
                                        </div>
                                        <div class="time">
                                            {{
                                                item.endDate || item.createTime
                                            }}
                                        </div>
                                    </div>
                                </div>
                            </el-timeline-item>
                        </template>
                    </el-timeline>
                </div>
            </div>
        </div>
        <el-dialog
            :title="previewVideoItem.type ? '播放音频' : '预览视频'"
            :visible.sync="showVideoDialog"
            @close="closeVideoDialog"
            destroy-on-close
            width="40%"
        >
            <video
                ref="videoPlay"
                class="preview-video"
                style="max-width: 100%"
                controls
                name="media"
                v-if="!previewVideoItem.type"
            >
                <source :src="previewVideoItem.url" type="video/mp4" />
            </video>
            <audio
                ref="videoPlay"
                class="preview-video"
                v-else
                :src="previewVideoItem.url"
                controls="controls"
            ></audio>
        </el-dialog>
        <el-dialog
            :title="ChildTableTitle"
            :visible.sync="showChild"
            :close-on-click-modal="false"
        >
            <el-table :data="ChildTableData">
                <el-table-column
                    label="序号"
                    align="center"
                    type="index"
                    width="60"
                >
                </el-table-column>
                <el-table-column
                    v-for="(item, index) in ChildTableColumn"
                    :key="index"
                    :prop="item.prop"
                    :label="item.name"
                    :show-overflow-tooltip="
                        [3, 4, 6, 7, 12].includes(item.valueKindId)
                    "
                    :min-width="
                        [3, 11].includes(item.valueKindId) ||
                        item.prop === 'createTime'
                            ? '200px'
                            : [5, 8].includes(item.valueKindId)
                            ? '140px'
                            : item.name.length * 16 + 20 > 140
                            ? item.name.length * 16 + 20 + 'px'
                            : '140px'
                    "
                >
                    <template slot-scope="scope">
                        <template
                            v-if="item.valueKindId === 4"
                            class="address-text"
                        >
                            {{
                                scope.row[item.prop]
                                    ? scope.row[item.prop].cityName
                                    : ""
                            }}
                            {{
                                scope.row[item.prop] &&
                                scope.row[item.prop].cityAddress
                                    ? scope.row[item.prop].cityAddress
                                    : ""
                            }}
                        </template>
                        <div v-else-if="item.valueKindId === 5">
                            <div
                                v-if="
                                    scope.row[item.prop] &&
                                        scope.row[item.prop].length
                                "
                            >
                                <img
                                    class="table-img"
                                    :src="
                                        $staticUrl +
                                            '/' +
                                            scope.row[item.prop][0]
                                    "
                                    alt=""
                                    @click="previewImg(scope.row[item.prop])"
                                />
                            </div>
                        </div>
                        <div v-else-if="item.valueKindId === 8">
                            <div
                                v-if="
                                    scope.row[item.prop] &&
                                        scope.row[item.prop].length
                                "
                            >
<!--                                <video-->
<!--                                    class="table-img"-->
<!--                                    :src="-->
<!--                                        $staticUrl +-->
<!--                                            '/' +-->
<!--                                            scope.row[item.prop][0]-->
<!--                                    "-->
<!--                                    alt=""-->
<!--                                    @click="previewVideo(scope.row[item.prop])"-->
<!--                                ></video>-->
                                <el-buttom @click="previewVideo(scope.row[item.prop])">点击播放</el-buttom>
                            </div>
                        </div>
                        <div v-else-if="item.valueKindId === 9">
                            <div
                                v-if="
                                    scope.row[item.prop] &&
                                        scope.row[item.prop].length
                                "
                            >
                                <el-button
                                    type="text"
                                    @click="
                                        previewVideo(
                                            scope.row[item.prop],
                                            'record'
                                        )
                                    "
                                    >播放</el-button
                                >
                            </div>
                        </div>
                        <div v-else-if="item.valueKindId === 10">
                            <div
                                v-if="
                                    scope.row[item.prop] &&
                                        scope.row[item.prop].length
                                "
                            >
                                <el-link
                                    class="table-file"
                                    v-for="(it, idx) in scope.row[item.prop]"
                                    :key="idx"
                                    type="primary"
                                    :href="$staticUrl + '/' + it"
                                    target="_blank"
                                >
                                    文件{{ idx + 1 }}
                                </el-link>
                            </div>
                        </div>
                        <span
                            v-else
                            class="other-span"
                            :title="scope.row[item.prop]"
                            >{{ scope.row[item.prop] }}</span
                        >
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>
        <el-dialog
            :title="
                isMark
                    ? '批量标记数据状态'
                    : form.approvedStatus === 1
                    ? '通过'
                    : '不通过'
            "
            :close-on-click-modal="false"
            :visible.sync="showRemarks"
            width="600px"
        >
            <el-form ref="form" :model="form">
                <div style="margin-bottom: 10px;" v-if="isMark">
                    <el-radio v-model="form.markData" :label="3">确认</el-radio>
                    <el-radio v-model="form.markData" :label="0">有误</el-radio>
                </div>
                <template v-if="(isMark && !form.markData) || !isMark">
                    <el-input
                        type="textarea"
                        :autosize="{ minRows: 2, maxRows: 5 }"
                        :placeholder="
                            isMark
                                ? '批量有误原因，填写此处内容下方每行描述可不填写（非必填）'
                                : '请输入审批原因' +
                                  (form.approvedStatus === 2
                                      ? '（必填）'
                                      : '（非必填）')
                        "
                        v-model="form.remark"
                        maxlength="100"
                        show-word-limit
                    >
                    </el-input>
                    <p v-if="form.approvedStatus === 2" class="reject">
                        <i class="el-icon-warning"></i>
                        <span>选中问题行</span>
                    </p>
                    <div
                        v-if="form.approvedStatus === 2"
                        class="reject-content"
                    >
                        <el-table
                            :data="selectionTableData"
                            class="pbb__table"
                            header-cell-class-name="pbb__table-thead"
                            cell-class-name="pbb__table-thead-cell"
                            row-class-name="pbb__table-thead-row"
                        >
                            <el-table-column
                                label="名称"
                                prop="name"
                                width="80"
                                show-overflow-tooltip
                            >
                            </el-table-column>
                            <el-table-column
                                label="问题描述(非必填)"
                                prop="verifyCause"
                            >
                                <template slot-scope="scope">
                                    <el-input
                                        v-model="scope.row.verifyCause"
                                        placeholder="请输入"
                                        maxlength="30"
                                        size="mini"
                                    ></el-input>
                                </template>
                            </el-table-column>
                        </el-table>
                        <el-pagination
                            class="page"
                            v-if="multipleSelection.length > 10"
                            @size-change="selectionTurnPage"
                            @current-change="selectionTurnPage"
                            :current-page.sync="selectionPageIndex"
                            :page-size="10"
                            layout="prev, pager, next"
                            :total="multipleSelection.length"
                        >
                        </el-pagination>
                    </div>
                </template>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="closeShowRemarks">取消</el-button>
                <el-button type="primary" @click="toSubmit">确认</el-button>
            </div>
        </el-dialog>
        <el-dialog
            title="导出"
            width="30%"
            :close-on-click-modal="false"
            :visible.sync="dialogTableVisible"
            @close="closeExportSelect"
            class="ExportSelect"
        >
            <p>目前仅支持导出5000条数据</p>
            <h6>选择导出列:</h6>
            <el-select
                placeholder="请选择(默认导出全部)"
                multiple
                collapse-tags
                clearable
                filterable
                v-model="exportSelection"
                @change="changeExportSelection"
            >
                <el-option
                    v-for="(item, index) in exportTableColumn"
                    :label="item.label"
                    :value="item.value"
                    :key="index"
                >
                </el-option>
            </el-select>
            <div slot="footer" class="dialog-footer">
                <el-button @click="closeExportSelect">取 消</el-button>
                <el-button type="primary" @click="exportData">确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog
            title="导出附件"
            :visible.sync="enclosureDialog"
            width="30%"
            class="annex-mask"
            @close="closeAnnex"
            @open="openAnnex"
        >
            <div v-if="exportAnnexList.length > 0">
                <p>目前仅支持导出前1000条数据</p>
                <div>
                    <span>选择导出附件:</span>
                    <el-checkbox-group v-model="exportCheckList">
                        <el-checkbox
                            v-for="(item, index) in exportAnnexList"
                            :key="index"
                            :label="item.id"
                            >{{ item.name }}</el-checkbox
                        >
                    </el-checkbox-group>
                </div>
                <div>
                    <span>附件名称:</span>
                    <el-select
                        v-model="annexName"
                        multiple
                        :multiple-limit="3"
                        placeholder="请选择"
                    >
                        <el-option
                            v-for="(item, index) in annexNameList"
                            :key="index"
                            :value="item.id"
                            :label="item.name"
                        >
                        </el-option>
                    </el-select>
                    <p>选择某一列数据内容为导出的附件命名</p>
                </div>
            </div>
            <p v-else>选择的列表项暂无附件</p>
            <span
                slot="footer"
                v-if="exportAnnexList.length > 0"
                class="dialog-footer"
            >
                <el-button @click="unExporTAnnex">取 消</el-button>
                <el-button type="primary" @click="exportAnnex">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog
            title="表单介绍详情"
            :visible.sync="dialogVisible"
            width="30%"
            class="rich-dialog"
        >
            <div>
                <p class="titleName"><span>标题:</span>{{ tableName }}</p>
                <div v-html="description" class="centent"></div>
            </div>
        </el-dialog>
    </page-box>
</template>

<script lang="ts">
import { Component, Mixins } from "vue-property-decorator";
import FormMixin from "@/mixins/form.mixin.base.ts";
import GetFormInfoDescription from "../mixins";
import { dialogPreviewImg } from "@/components/public/preview-img/index";
import { dialogPreviewVideoAudio } from "@/components/public/preview-video-audio/index";
import { downLoadBase64File } from "@/utils";

@Component({
    name: "CreatedAndReceivedDetailListNotAlive"
})
export default class CreatedAndReceivedDetailList extends Mixins(
    FormMixin,
    GetFormInfoDescription
) {
    form: any = {
        // 验收内容
        remark: "",
        approvedStatus: 1,
        markData: 0
    };

    // 导出附件的弹窗
    enclosureDialog = false;

    // 表格名称
    tableName: any = "";
    // 数据总数
    total = 0;
    // 每页数量
    pageSize = 10;
    // 当前页码
    pageIndex = 1;
    // 表格数据
    tableData: any[] = [];
    key = 0;
    // 动态表头
    tableColumn: any = [];
    // 所有数据
    allData: any = [];
    // 选中内容
    multipleSelection: any = [];
    // 显示导出选项
    previewVideoItem: any = {
        url: "",
        type: ""
    };

    showVideoDialog = false;
    select: any = [];

    ChildTableData: any[] = [];
    ChildTableColumn: any[] = [];
    ChildTableTitle = "";
    showChild = false;
    showRemarks = false;
    // 显示导出选项
    dialogTableVisible = false;
    // 导出内容
    exportSelection: any = [];
    exportTableColumn: any = [];
    oldChooseData: any = [];
    exportAnnexList: any = [];
    exportCheckList: any = [];
    annexNameList: any = [];
    annexName: any = [];
    dialogVisible = false;
    processNodeInfo: any[] = [];
    // 前端分页显示数据
    selectionTableData: any[] = [];
    // 所有的选中数据
    selectionTableDataAll: any[] = [];
    selectionPageIndex = 1;
    isMark = false;
    // 是待审批状态
    isApproval = true;

    get _isFinish() {
        return this.$route.query.status
            ? this.$route.query.status.toString() === "2"
            : false;
    }

    get canMark() {
        return !!this.multipleSelection.filter((item: any) => item.verify !== 1)
            .length;
    }

    created() {
        this.initPage();
        this.getProcessDetail();
    }

    async getProcessDetail() {
        const res = await this.$server["process/getDetail"]({
            data: {
                processInstId: this.$route.query.processInstanceId
            }
        });
        if (res.data.code === 200) {
            this.processNodeInfo = res.data.data.map(
                (item: any, index: number) => {
                    return {
                        ...item,
                        title:
                            item.category === "send"
                                ? "发起任务"
                                : item.category === "handle"
                                    ? index
                                        ? "已填报"
                                        : "待填报"
                                    : item.approvalStatus
                                        ? item.approvalStatus === 1
                                            ? "已审批"
                                            : "已驳回"
                                        : index
                                            ? "已审批"
                                            : "待审批"
                    };
                }
            );
            if (this.processNodeInfo.length) {
                this.isApproval = this.processNodeInfo[0].title === "待审批";
            }
        } else {
            this.$message.error(res.data.message || "接口请求错误!");
        }
    }

    indexMethod(index: any) {
        return index + 1 + (this.pageIndex - 1) * this.pageSize;
    }

    // 展示富文本
    showRichText() {
        this.dialogVisible = true;
    }

    // 取消导出附件
    unExporTAnnex() {
        this.exportAnnexList = [];
        this.annexNameList = [];
        this.enclosureDialog = false;
        (this.$refs.multipleTable as any).clearSelection();
    }

    // 导出附件弹窗打开
    handleExprotAnnex() {
        if (this.multipleSelection.length > 0) {
            this.enclosureDialog = true;
            this.tableColumn.forEach((item: any) => {
                if ([5, 8, 9, 10].includes(item.valueKindId) && item.id) {
                    this.exportAnnexList.push(item);
                }
                if (![4, 5, 8, 9, 10].includes(item.valueKindId) && item.id) {
                    this.annexNameList.push(item);
                }
            });
        } else {
            return this.$message.error("请选择需要导出附件的数据");
        }
    }

    // 标记数据状态
    markData() {
        this.isMark = true;
        this.toAcceptance();
    }

    closeAnnex() {
        this.exportAnnexList = [];
        this.annexNameList = [];
        this.exportCheckList = [];
        this.annexName = [];

        this.$store.dispatch("changeText", "");
    }

    openAnnex() {
        this.$store.dispatch("changeText", "附件正在下载中...");
    }

    // 导出附件
    async exportAnnex() {
        const selectRowDataFormIds: any[] = this.multipleSelection.map(
            (item: any) => {
                return item.dataFormId;
            }
        );
        if (this.exportCheckList.length === 0) {
            return this.$message.error("请选择需要导出的附件");
        }
        if (this.annexName.length === 0) {
            return this.$message.error("请给导出的附件命名");
        }

        const res = await this.$server["task/exportAnnex"]({
            data: {
                selectRowDataFormIds,
                selectColumnItemIds: this.annexName,
                accessoryItemIds: this.exportCheckList
            },
            responseType: "blob"
        });
        this.enclosureDialog = false;
        const url = window.URL.createObjectURL(new Blob([res.data]));
        const link = document.createElement("a");
        link.style.display = "none";
        link.href = url;
        link.setAttribute("download", `${this.tableName}.zip`);
        document.body.appendChild(link);
        link.click();
        this.$message.success("下载成功");
        document.body.removeChild(link);
        (this.$refs.multipleTable as any).clearSelection();
    }

    initPage() {
        this.getTableTitle();
        this.getTable();
        this.tableName = this.$route.query.name;
    }

    async getTableTitle() {
        const res = await this.$server["moduleManage/collection/title"]({
            data: {
                formId: this.$route.query.formId
            }
        });
        if (res.data.code === 200) {
            const column = this.$route.query.taskId
                ? []
                : [
                      {
                          prop: "createTime",
                          name: "填报时间"
                      }
                ];
            this.tableColumn = [];
            this.tableColumn.push(...this.buildData(res.data.data));
            this.tableColumn = this.tableColumn.map((item: any) => {
                return {
                    ...item,
                    name: item.unitKindName
                        ? item.name + "(" + item.unitKindName + ")"
                        : item.name,
                    prop: item.itemType === 1 ? item.childrenFormId : item.id
                };
            });
            this.tableColumn = column.concat([], this.tableColumn);
        } else {
            this.$message.error(res.data.message || "接口请求错误!");
        }
    }

    buildData(list: any) {
        const tableColumn: any[] = [];
        list.forEach((item: any) => {
            if (item.itemType === 0) {
                tableColumn.push(...this.buildData(item.items));
            } else {
                tableColumn.push(item);
            }
        });
        return tableColumn;
    }

    async getTable() {
        const res = await this.$server["moduleManage/collection/flowData"]({
            data: {
                formId: this.$route.query.formId,
                currentPage: this.pageIndex,
                pageSize: this.pageSize,
                processInstId: this.$route.query.processInstanceId
            }
        });
        if (res.data.code === 200) {
            this.tableData = [];
            this.allData = res.data.data.records;
            res.data.data.records.forEach((item: any) => {
                const row = {
                    ...item
                };
                item.itemDataList.forEach((it: any) => {
                    if (
                        ["4", "5", "8", "9", "10"].includes(
                            it.valueKindId.toString()
                        )
                    ) {
                        row[it.itemId] = it.extData || [];
                    } else {
                        row[it.itemId] = it.itemValue || "";
                    }
                });
                this.tableData.push(row);
            });
            this.total = res.data.data.total;
            this.key++;
        } else {
            this.$message.error(res.data.message || "接口请求错误!");
        }
    }

    // 查看子表数据
    showChildTable(column: any, lineNum: any) {
        this.ChildTableColumn = column.items.map((item: any) => {
            return {
                ...item,
                name: item.unitKindName
                    ? item.name + "(" + item.unitKindName + ")"
                    : item.name,
                prop: item.id
            };
        });
        // 子表表头id
        const columnId = column.items.map((item: any) => item.id);
        this.ChildTableData = [];
        this.ChildTableTitle = column.name;
        // 这行这个单元格子表的所有数据
        const rowColumnData: any = [];
        this.allData[lineNum].dataList.forEach((item: any) => {
            if (columnId.includes(item.itemId)) {
                rowColumnData.push(item);
            }
        });
        const data: any[] = [];
        let n = 1;
        const getRow = (n: any) => {
            return rowColumnData.filter((item: any) => item.lineNum === n);
        };
        rowColumnData.forEach(() => {
            if (getRow(n).length) {
                data.push(getRow(n));
                n++;
            }
        });
        data.forEach((item: any) => {
            const row = {};
            item.forEach((it: any) => {
                if (
                    ["4", "5", "8", "9", "10"].includes(
                        it.valueKindId.toString()
                    )
                ) {
                    row[it.itemId] = it.extData || [];
                } else {
                    row[it.itemId] = it.itemValue || "";
                }
            });
            this.ChildTableData.push(row);
        });
        this.showChild = true;
    }

    // 选中修改
    handleSelectionChange(val: any) {
        this.multipleSelection = val;
    }

    // 验收通过/不通过
    toAcceptance(val?: boolean) {
        this.form.remark = "";
        this.form.approvedStatus = val ? 1 : 2;
        if (!val) {
            this.selectionTableDataAll = this.multipleSelection.map(
                (item: any) => {
                    return {
                        dataFormId: item.dataFormId,
                        verifyCause: "",
                        name: item.firstItemValue
                    };
                }
            );
            this.selectionTableData = this.selectionTableDataAll.slice(0, 10);
        }
        this.showRemarks = true;
    }

    // 打开导出弹窗
    showExportSelect() {
        this.dialogTableVisible = true;
        this.exportTableColumn = [];
        this.tableColumn.map((item: any) => {
            if (item.id) {
                this.exportTableColumn.push({
                    ...item,
                    label: item.name,
                    value: item.id
                });
            }
        });
        this.exportTableColumn.unshift({ label: "全部", value: "ALL_SELECT" });
    }

    // 关闭导出弹窗
    closeExportSelect() {
        this.dialogTableVisible = false;
        this.exportSelection = [];
        this.exportTableColumn = [];
        this.oldChooseData = [];
    }

    // 修改导出选项
    changeExportSelection(val: any) {
        // 1、点击全选，选中全部
        // 2、全选状态下，再次点击全选，取消全部选中
        // 3、全选状态下，取消了某个选中，就需要取消 全选 和 当前这个数据 的选中
        // 4、没有全选，但是勾选了除全选外的所有数据，就是全选了，就选中所有
        // 5、没有全选，但也没有勾选除全选外的所有数据，不做处理
        const allSelection = this.exportTableColumn.map(
            (item: any) => item.value
        );
        if (val.includes("ALL_SELECT")) {
            if (this.oldChooseData.includes("ALL_SELECT")) {
                if (val.length < allSelection.length) {
                    const index = val.indexOf("ALL_SELECT");
                    this.exportSelection.splice(index, 1);
                }
            } else {
                this.exportSelection = allSelection;
            }
        } else {
            if (this.oldChooseData.includes("ALL_SELECT")) {
                this.exportSelection = [];
            } else {
                if (val.length === allSelection.length - 1) {
                    this.exportSelection = allSelection;
                }
            }
        }
        this.oldChooseData = this.exportSelection;
    }

    // 导出
    async exportData() {
        this.dialogTableVisible = false;
        const itemIds: any = [];
        this.exportSelection.forEach((item: any) => {
            if (item !== "ALL_SELECT") {
                itemIds.push(item);
            }
        });
        const res = await this.$server["task/exportData"]({
            data: {
                formId: this.$route.query.formId,
                itemId: itemIds,
                dataFormId: this.multipleSelection.map(
                    (item: any) => item.dataFormId
                ),
                processInstId: this.$route.query.processInstanceId
            }
        });
        if (res.data && res.data.code === 200) {
            downLoadBase64File(
                this.tableName +
                    "-" +
                    new Date().format("yyyy-MM-dd hh:mm:ss") +
                    ".xlsx",
                res.data.data
            );
            this.closeExportSelect();
        } else {
            this.$message.error(res.data.message || "接口请求错误!");
        }
    }

    closeShowRemarks() {
        this.showRemarks = false;
        this.form.remark = "";
        this.isMark = false;
    }

    // 提交审核
    async toSubmit() {
        if (this.isMark) {
            this.toMarkSubmit();
            return false;
        }
        if (this.form.approvedStatus === 2) {
            if (!this.form.remark) {
                return this.$message.error("请输入驳回原因");
            }
        }
        const res = await this.$server["task/audit"]({
            data: {
                taskId: this.$route.query.taskId,
                reason: this.form.remark,
                approvedStatus: this.form.approvedStatus,
                failList:
                    this.form.approvedStatus === 2
                        ? this.selectionTableDataAll.map((item: any) => {
                            return {
                                  dataFormId: item.dataFormId,
                                  verifyCause: item.verifyCause
                            };
                        })
                        : []
            }
        });
        if (res.data.code === 200) {
            this.$message.success("操作成功!");
            this.multipleSelection = [];
            this.closeShowRemarks();
            this.$router.go(-1);
        } else {
            this.$message.error(res.data.message || "接口请求错误!");
        }
    }

    async toMarkSubmit() {
        const data = this.selectionTableData.map((item: any) => {
            return {
                dataFormId: item.dataFormId,
                reason: item.verifyCause || this.form.remark || "",
                verify: this.form.markData
            };
        });
        const res = await this.$server["task/mark"]({
            data
        });
        if (res.data.code === 200) {
            this.$message.success("操作成功!");
            this.multipleSelection = [];
            this.closeShowRemarks();
            this.getTable();
            (this.$refs.multipleTable as any).clearSelection();
        } else {
            this.$message.error(res.data.message || "接口请求错误!");
        }
    }

    // 图片预览
    previewImg(urls: any) {
        const list = urls.map((item: any) => this.$staticUrl + "/" + item);
        dialogPreviewImg({
            title: "预览图片",
            current: list
        });
    }

    // 视频预览
    previewVideo(file: any) {
        dialogPreviewVideoAudio({
            sourceUrl: this.$staticUrl + "/" + file[0]
        });
    }

    // 关闭视频预览
    closeVideoDialog() {
        this.showVideoDialog = false;
        this.previewVideoItem = {
            url: "",
            type: ""
        };
    }

    toPage() {
        if (this.$route.query.taskId) {
            this.$router.push({
                path: "/module-manage/town-received"
            });
        } else {
            if (this.$route.query.pageFrom) {
                this.$router.push({
                    path: "/module-manage/town-share-data"
                });
            } else {
                this.$router.go(-1);
            }
        }
    }

    // 选中问题行翻页
    selectionTurnPage() {
        this.selectionTableData = this.selectionTableDataAll.slice(
            this.selectionPageIndex * 10 - 10,
            this.selectionPageIndex * 10
        );
    }
}
</script>
<style scoped lang="scss">
::v-deep {
    .page-base-body {
        overflow: hidden !important;
        height: calc(100% - 50px) !important;
        background: transparent !important;
    }
}

.btn-box {
    padding: 12px 18px;
    background: #fff;
}

.reject-tip {
    font-size: 14px;
    color: #de2728;
    margin-top: 6px !important;
}

.blue {
    background: #32a78f;
    border-color: #32a78f;
    margin-right: 12px;

    &:hover {
        background: #32a78f;
        border-color: #32a78f;
    }

    &:focus {
        background: #32a78f;
        border-color: #32a78f;
    }
}

.reject {
    i {
        color: #de2728;
        font-size: 14px;
        margin-right: 4px;
    }
}

.reject-content {
    .page {
        text-align: center;
    }
}

.task-detail-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    height: calc(100% - 88px);
    overflow-y: auto;

    .left {
        width: 86%;
        height: 100%;
        .page-base-footer {
            min-width: unset !important;
        }
    }

    .right {
        width: calc(14% - 10px);
        height: 100%;
        background: #fff;

        .title {
            font-size: 14px;
            line-height: 44px;
            margin: 0;
            padding: 0 18px;
            background: #f7f7f7;
        }

        .content {
            height: calc(100% - 44px);
            padding: 18px;
            overflow-y: auto;

            ::v-deep {
                .el-timeline-item {
                    padding-bottom: 30px;
                    .el-timeline-item__tail {
                        top: 14px;
                        border-width: 1px;
                        border-color: #d4d4d4;
                    }
                    .el-timeline-item__dot {
                        left: -2px;
                        top: 14px;
                        .icon-svg {
                            font-size: 14px;
                            color: #de2728;
                        }
                        span {
                            display: block;
                            width: 14px;
                            height: 14px;
                            border-radius: 50%;
                            &.red {
                                background: #de2728;
                            }
                            &.green {
                                background: #d4d4d4;
                            }
                        }
                    }
                }
            }

            .card {
                padding: 0 10px;
                border: 1px solid #d4d4d4;

                .card-title {
                    font-size: 14px;
                    font-family: "PingFang SC Medium";
                    line-height: 48px;
                    color: #6b6c70;
                    margin: 0;
                    border-bottom: 1px solid #d4d4d4;
                }

                .reason {
                    margin-top: 10px;
                    @include flexLayout(flex, normal, normal);
                    span {
                        display: inline-block;
                        width: 42px;
                        font-size: 14px;
                        font-family: "PingFang SC Medium";
                        line-height: 20px;
                        color: #6b6c70;
                    }
                    p {
                        margin: 0;
                        width: calc(100% - 42px);
                        font-size: 14px;
                        font-family: "PingFang SC Medium";
                        line-height: 20px;
                        color: #6b6c70;
                        @include textEllipsis(2);
                    }
                }

                .name-box {
                    padding: 10px 0;

                    .name {
                        position: relative;

                        .img {
                            width: 24px;
                            height: 24px;
                            line-height: 24px;
                            text-align: center;
                            border-radius: 50%;
                            overflow: hidden;
                            background: #067bff;
                            color: #f5f5f5;
                            font-size: 14px;
                            margin-right: 4px;
                        }

                        .icon-svg {
                            position: absolute;
                            top: 16px;
                            left: 17px;
                            font-size: 8px;
                            color: #de2728;
                        }

                        p {
                            width: 100%;
                            margin: 0;
                            padding-bottom: 3px;
                            font-size: 12px;
                            line-height: 14px;
                            padding-top: 6px;
                        }
                    }

                    .time {
                        font-size: 12px;
                        color: #909399;
                        line-height: 12px;
                        padding-top: 4px;
                    }
                }
            }
        }
    }
}

.table-img {
    width: 120px;
    height: 80px;
    cursor: pointer;
    object-fit: contain;
}

.table-file {
    margin-right: 12px;
}

.acceptance-box {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    margin-top: 10px;

    .label {
        margin-right: 20px;
        line-height: 36px;
    }

    .right {
        p {
            margin: 5px 0 10px 0;
        }
    }
}

.annex-mask {
    ::v-deep {
        .el-dialog__body {
            padding: 10px 14px;

            p {
                margin: 0;
                line-height: 28px;
                color: #ccc;
            }

            & > div > div {
                display: flex;
                flex-direction: column;

                & > span {
                    margin-bottom: 10px;
                }

                & + div {
                    margin-top: 24px;
                }
            }

            .el-checkbox-group {
                .el-checkbox {
                    margin-right: 30px !important;
                }
            }
        }
    }
}

.preview-video {
    display: block;
    margin: 0 auto;
}

.address-text {
    @include textEllipsis();
}

.task-detail-header {
    padding: 10px 18px;

    .title p.description {
        font-size: 14px;
        max-width: 640px;
        @include textEllipsis();
    }

    .btn {
        font-size: 14px;
        line-height: 22px;
        color: #2c82c9;
        cursor: pointer;

        &:hover {
            text-decoration: underline;
        }
    }
}

.rich-dialog {
    ::v-deep {
        .el-dialog__header {
            border-bottom: 1px solid #ccc;
        }

        .el-dialog__body {
            padding: 10px 20px;

            .titleName {
                font-size: 16px;
                padding: 0;
                margin: 0;
                margin-bottom: 10px;
            }

            .centent {
                max-height: 600px;
                overflow-y: scroll;
            }
        }
    }
}

.ExportSelect {
    ::v-deep {
        .el-dialog__body {
            p,
            h6 {
                margin: 0;
                padding: 0;
                margin-bottom: 10px;
            }

            p {
                font-size: 14px;
                color: #aaaaaa;
            }

            h6 {
                font-size: 14px;
                color: #37383a;
                font-weight: 400;
            }
            padding: 10px 20px;
            .el-select {
                width: 100%;
            }
        }
    }
}
</style>
